<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>东方学者建设服务数据的汇总与分析</title>
        <meta name="Keywords" content="东方学者,建设,服务数据的汇总与分析">
        <meta name="Description" content="东方学者建设服务数据的汇总与分析">
        <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
        <link href="css/login/base.css" rel="stylesheet"/>
        <link href="css/login/iconfont.css"  rel="stylesheet"/>
        <link href="css/login/reg.css" rel="stylesheet" />
    </head>
    <body>
        <div id="ajax-hook"></div>
        <div class="wrap">
            <div class="wpn">
                <div class="form-data pos">
                    <a href="">
                    <div class="head-systit">东方学者建设服务数据的汇总与分析</div>                  
                    <!--<img src="css/login/login-logo.png" class="head-logo">  -->
                    </a>
                    <div class="change-login">
                        <p class="account_number on">账号登录</p>
                        <!-- <p class="message">短信登录</p> -->
                    </div>
                    <div class="form1">
                        <p class="p-input pos">
                            <label for="num">请输入用户名</label>
                            <input type="text" id="num">
                            <span class="tel-warn num-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                        </p>
                        <p class="p-input pos">
                            <label for="pass">请输入密码</label>
                            <input type="password" style="display:none">
                            <input type="password" id="pass" autocomplete="new-password">
                            <span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                        </p>
                        <p class="p-input pos code hide">
                            <label for="veri">请输入验证码</label>
                            <input type="text" id="veri">
                            <img src="http://www.17sucai.com/preview/1064026/2018-02-04/ui.rar/index.html">
                            <span class="tel-warn img-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                            <!-- <a href="javascript:;">换一换</a> -->
                        </p>
                    </div>
                    <div class="form2 hide">
                        <p class="p-input pos">
                            <label for="num2">手机号</label>
                            <input type="number" id="num2">
                            <span class="tel-warn num2-err hide"><em>账号或密码错误</em><i class="icon-warn"></i></span>
                        </p>
                        <p class="p-input pos">
                            <label for="veri-code">输入验证码</label>
                            <input type="number" id="veri-code">
                            <a href="javascript:;" class="send">发送验证码</a>
                            <span class="time hide"><em>120</em>s</span>
                            <span class="tel-warn error hide">验证码错误</span>
                        </p>
                    </div>
                    <div class="r-forget cl">
                        <!--<a href="" class="z">账号注册</a>
                        <a href="" class="y">忘记密码</a>-->
                    </div>
                    <button class="lang-btn off log-btn">登录</button>
                    <div class="third-party hide">
                        <a href="" class="log-qq icon-qq-round"></a>
                        <a href="" class="log-qq icon-weixin"></a>
                        <a href="" class="log-qq icon-sina1"></a>
                    </div>
                    <p class="right">上海教育人才交流服务中心 © 2018</p>
                </div>
            </div>
        </div>
        <script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
        <script src="css/login/jquery.js"></script>
        <script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
        <script>
            $(function(){
                $(".icon-ok-sign").click(function(){
                    verify = $(this).hasClass('boxcol') ? 0 : 1;
                    $(this).toggleClass('boxcol');
                    ob = $('input[name=agree]');
                    ob.val(ob.val()==0?1:0);
                    ob.val(ob.val() !== verify ? verify : ob.val());

                    ob.val() == 0 ? $('#errormsg').removeClass('hide').addClass('show') : $('#errormsg').removeClass('show').addClass('hide');
                });
                //输入框输入时模拟placeholder效果
                var oInput = $(".form-data input");
                oInput.focus(function () {
                    $(this).siblings("label").hide();
                });
                oInput.blur(function () {
                    if($(this).val()==""){
                        $(this).siblings("label").show();
                    }
                });
                // 输入框内容变化按钮颜色发生变化
                oInput.keyup(function () {
                    if($(this).val()!="jquery.js"){
                        $(".log-btn").removeClass("off")
                    }else{
                        $(".log-btn").addClass("off")
                    }
                });


                //     $(".form-data").delegate(".send","click",function () {
                //     	var oTime = $(".form-data .time"),
                // oSend = $(".form-data .send"),
                // num = parseInt(oTime.text()),
                // oEm = $(".form-data .time em");
                //   $(this).hide();
                //   oTime.removeClass("hide");
                //   var timer = setInterval(function () {
                //   	var num2 = num-=1;
                //             oEm.text(num2);
                //             if(num2==0){
                //                 clearInterval(timer);
                //                 oSend.text("重新发送验证码");
                // 	   oSend.show();
                //                 oEm.text("60");
                //                 oTime.addClass("hide");
                //             }
                //         },1000);
                //     });
                // $(".message").click(function () {
                // 	$(this).addClass("on");
                //        $(".account_number").removeClass("on");
                // 	$(".form2").removeClass("hide");
                // 	$(".form1").addClass("hide")
                //    });
                // $(".account_number").click(function () {
                //        $(this).addClass("on");
                //        $(".message").removeClass("on");
                //           $(".form2").addClass("hide");
                //           $(".form1").removeClass("hide")
                //       })
            });
            $(function(){
                var tab = 'account_number';
                // 选项卡切换
                $(".account_number").click(function () {
                    $('.tel-warn').addClass('hide');
                    tab = $(this).attr('class').split(' ')[0];
                    checkBtn();
                    $(this).addClass("on");
                    $(".message").removeClass("on");
                    $(".form2").addClass("hide");
                    $(".form1").removeClass("hide");
                });

                // 选项卡切换
                $(".message").click(function () {
                    $('.tel-warn').addClass('hide');
                    tab = $(this).attr('class').split(' ')[0];
                    checkBtn();
                    $(this).addClass("on");
                    $(".account_number").removeClass("on");
                    $(".form2").removeClass("hide");
                    $(".form1").addClass("hide");

                });

                $('#num').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                $('#pass').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                $('#veri').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                $('#num2').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                $('#veri-code').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                // 按钮是否可点击
                function checkBtn()
                {
                    $(".log-btn").off('click');
                    if (tab == 'account_number') {
                        var inp = $.trim($('#num').val());
                        var pass = $.trim($('#pass').val());
                        if (inp != '' && pass != '') {
                            if (!$('.code').hasClass('hide')) {
                                code = $.trim($('#veri').val());
                                if (code == '') {
                                    $(".log-btn").addClass("off");
                                } else {
                                    $(".log-btn").removeClass("off");
                                    sendBtn();
                                }
                            } else {
                                $(".log-btn").removeClass("off");
                                sendBtn();
                            }
                        } else {
                            $(".log-btn").addClass("off");
                        }
                    } else {
                        var phone = $.trim($('#num2').val());
                        var code2 = $.trim($('#veri-code').val());
                        if (phone != '' && code2 != '') {
                            $(".log-btn").removeClass("off");
                            sendBtn();
                        } else {
                            $(".log-btn").addClass("off");
                        }
                    }
                }

                function checkAccount(username){
                    if (username == '') {
                        $('.num-err').removeClass('hide').find("em").text('请输入账户');
                        return false;
                    } else {
                        $('.num-err').addClass('hide');
                        return true;
                    }
                }

                function checkPass(pass){
                    if (pass == '') {
                        $('.pass-err').removeClass('hide').text('请输入密码');
                        return false;
                    } else {
                        $('.pass-err').addClass('hide');
                        return true;
                    }
                }

                function checkCode(code){
                    if (code == '') {
                        // $('.tel-warn').removeClass('hide').text('请输入验证码');
                        return false;
                    } else {
                        // $('.tel-warn').addClass('hide');
                        return true;
                    }
                }

                function checkPhone(phone){
                    var status = true;
                    if (phone == '') {
                        $('.num2-err').removeClass('hide').find("em").text('请输入手机号');
                        return false;
                    }
                    var param = /^1[34578]\d{9}$/;
                    if (!param.test(phone)) {
                        // globalTip({'msg':'手机号不合法，请重新输入','setTime':3});
                        $('.num2-err').removeClass('hide');
                        $('.num2-err').text('手机号不合法，请重新输入');
                        return false;
                    }
                    $.ajax({
                        url: '/checkPhone',
                        type: 'post',
                        dataType: 'json',
                        async: false,
                        data: {phone:phone,type:"login"},
                        success:function(data){
                            if (data.code == '0') {
                                $('.num2-err').addClass('hide');
                                // console.log('aa');
                                // return true;
                            } else {
                                $('.num2-err').removeClass('hide').text(data.msg);
                                // console.log('bb');
                                status = false;
                                // return false;
                            }
                        },
                        error:function(){
                            status = false;
                            // return false;
                        }
                    });
                    return status;
                }

                function checkPhoneCode(pCode){
                    if (pCode == '') {
                        $('.error').removeClass('hide').text('请输入验证码');
                        return false;
                    } else {
                        $('.error').addClass('hide');
                        return true;
                    }
                }

                // 登录点击事件
                function sendBtn(){
                    if (tab == 'account_number') {
                        $(".log-btn").click(function(){
                            // var type = 'phone';
                            var inp = $.trim($('#num').val());
                            var pass = $.trim($('#pass').val());
                            if (checkAccount(inp) && checkPass(pass)) {
                                var ldata = {userinp:inp,password:pass};
                                if (!$('.code').hasClass('hide')) {
                                    code = $.trim($('#veri').val());
                                    if (!checkCode(code)) {
                                        return false;
                                    }
                                    ldata.code = code;
                                }

                                var params = {};
                                params.username = inp;
                                params.password = pass;

                                console.log(params);

                                $.ajax({
                                    type: "POST",
                                    url: ctx+"login",
                                    data: params,
                                    success: function (r) {
                                        if (r.code == 0) {
                                            parent.location.href = '/index';
                                        } else {
                                            layer.msg(r.msg);
                                        }
                                    }
                                });
                            } else {
                                return false;
                            }
                        });
                    } else {
                        $(".log-btn").click(function(){
                            // var type = 'phone';
                            var phone = $.trim($('#num2').val());
                            var pcode = $.trim($('#veri-code').val());
                            if (checkPhone(phone) && checkPass(pcode)) {
                                $.ajax({
                                    url: '/plogin',
                                    type: 'post',
                                    dataType: 'json',
                                    async: true,
                                    data: {phone:phone,code:pcode},
                                    success:function(data){
                                        if (data.code == '0') {
                                            // globalTip({'msg':'登录成功!','setTime':3,'jump':true,'URL':'http://www.ui.cn'});
                                            globalTip(data.msg);
                                        } else if(data.code == '1') {
                                            $(".log-btn").off('click').addClass("off");
                                            $('.num2-err').removeClass('hide').text(data.msg);
                                            return false;
                                        } else if(data.code == '2') {
                                            $(".log-btn").off('click').addClass("off");
                                            $('.error').removeClass('hide').text(data.msg);
                                            return false;
                                        }
                                    },
                                    error:function(){

                                    }
                                });
                            } else {
                                $(".log-btn").off('click').addClass("off");
                                // $('.tel-warn').removeClass('hide').text('登录失败');
                                return false;
                            }
                        });
                    }
                }

                // 登录的回车事件
                $(window).keydown(function(event) {
                    if (event.keyCode == 13) {
                        $('.log-btn').trigger('click');
                    }
                });


                $(".form-data").delegate(".send","click",function () {
                    var phone = $.trim($('#num2').val());
                    if (checkPhone(phone)) {
                        $.ajax({
                            url: '/getcode',
                            type: 'post',
                            dataType: 'json',
                            async: true,
                            data: {phone:phone,type:"login"},
                            success:function(data){
                                if (data.code == '0') {

                                } else {

                                }
                            },
                            error:function(){

                            }
                        });
                        var oTime = $(".form-data .time"),
                            oSend = $(".form-data .send"),
                            num = parseInt(oTime.text()),
                            oEm = $(".form-data .time em");
                        $(this).hide();
                        oTime.removeClass("hide");
                        var timer = setInterval(function () {
                            var num2 = num-=1;
                            oEm.text(num2);
                            if(num2==0){
                                clearInterval(timer);
                                oSend.text("重新发送验证码");
                                oSend.show();
                                oEm.text("120");
                                oTime.addClass("hide");
                            }
                        },1000);
                    }
                });



            });

        </script>
    </body>

</html>